<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>BootsFaces: next-gen JSF Framework</title>
        <meta name="author" content="Riccardo Massera"></meta>
    </h:head>
    <h:body style="padding-top: 60px">
        <ui:composition template="/applayout/pageTemplate.xhtml">
            <ui:define name="content">
                <style>td {padding: 8px;}</style>
                <h1>Date Picker</h1>
                <p>BootsFaces derives the Date Picker component from jQuery UI's widget because of its ease of use and its configurability.</p>
                
                <strong>Date Picker modes</strong>
                <p>The <code>&lt;b:datepicker&gt;</code> supports six modes for displaying the widget, specified with the attribute<code>mode</code>:</p>
                
                <h:form>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th style="width: 230px;">b:datepicker</th>
                            <th><code>mode</code> attribute</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><b:datepicker mode="popup" placeholder="Click here"/></td>
                            <td>popup</td>
                            <td>In this mode, the Date picker is triggered only when the user clicks in the field.</td>
                        </tr>
                        <tr>
                            <td><b:datepicker mode="popup-icon" placeholder="Select a Date"/></td>
                            <td>popup-icon</td>
                            <td>In this mode, the Date picker is triggered either when the user clicks in the field, or when the user clicks on the calendar icon. The icon is positioned on the right of the input.</td>
                        </tr>
                        <tr>
                            <td><b:datepicker mode="icon-popup" placeholder="Select a Date"/></td>
                            <td>icon-popup</td>
                            <td>Same as above, but the icon is positioned on the left of the input.</td>
                        </tr>
                        <tr>
                            <td><b:datepicker mode="toggle-icon"/></td>
                            <td>toggle-icon</td>
                            <td>This is the default mode. In this mode, the Date picker is triggered only when the user clicks on the calendar icon. The icon is positioned on the right of the input.</td>
                        </tr>
                        <tr>
                            <td><b:datepicker mode="icon-toggle"/></td>
                            <td>icon-toggle</td>
                            <td>Same as above, but the icon is positioned on the left of the input.</td>
                        </tr>
                        <tr>
                            <td><b:datepicker mode="inline"/></td>
                            <td>inline</td>
                            <td>In this mode, the Date picker is displayed directly inline and no input field is shown.</td>
                        </tr>
                    </tbody>
                </table>
                </h:form>
                
                <strong>Widget options</strong>
                <p>BootsFaces <code>&lt;b:datepicker&gt;</code> tag supports jQuery UI's widget most relevant options:</p>
                
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Option</th>
                            <th>Type</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>changeMonth</code></td>
                            <td>boolean</td>
                            <td>Boolean value to specify if month selector should be shown.</td>
                        </tr>
                        <tr>
                            <td><code>changeYear</code></td>
                            <td>boolean</td>
                            <td>Boolean value to specify if year selector should be shown.</td>
                        </tr>
                        <tr>
                            <td><code>firstDay</code></td>
                            <td>int</td>
                            <td>Set the first day of the week: Sunday is 0, Monday is 1, etc. Default is 0 (Sunday).</td>
                        </tr>
                        <tr>
                            <td><code>numberOfMonths</code></td>
                            <td>int</td>
                            <td>Number of months to show.</td>
                        </tr>
                        <tr>
                            <td><code>showButtonPanel</code></td>
                            <td>boolean</td>
                            <td>Boolean value to specify if row Buttons to the bottom of calendar should be shown.</td>
                        </tr>
                        <tr>
                            <td><code>showWeek</code></td>
                            <td>boolean</td>
                            <td>Boolean value to specify if Week number should be shown.</td>
                        </tr>
                    </tbody>
                </table>
                    
                <h:form id="fpickdt">
                    <b:well>
                        <strong>Date Picker examples</strong>
                        <h:panelGrid columns="4" cellpadding="5">
                            <h:outputText value="Date:" />
                            <b:datepicker id="adate" showButtonPanel="true" changeMonth="true"
                                          changeYear="true" placeholder="Select a Date"
                                          value="#{dateBean.adate}" /><h:message for="adate" />
                            <h:panelGroup>Date Picker with <code>showButtonPanel</code>, <code>changeMonth</code>, <code>changeYear</code> set to true.</h:panelGroup>
                            <h:outputText value="Date(3 months):" />
                            <b:datepicker id="bdate" numberOfMonths="3" mode="icon-popup" 
                                          placeholder="Choose a Date" value="#{dateBean.bdate}"/>
                            <h:message for="bdate" />
                            <h:panelGroup>Date Picker with <code>numberOfMonths="3"</code> .</h:panelGroup>
                            <h:outputText value="Inline:" />
                            <b:datepicker id="cdate" mode="inline" showWeek="true" firstDay="1" value="#{dateBean.cdate}"/>
                            <h:message for="cdate" />
                            <h:panelGroup>Inline Date Picker with <code>showWeek="true"</code> and <code>firstDay="1"</code> .</h:panelGroup>

                        </h:panelGrid>
                        <b:row>
                           <b:column span="2" offset="3">
                        <b:commandButton value="Submit" update="fpickdt amodal" id="ajaxcb" ajax="true"
                                             look="primary" oncomplete="$('#amodal').modal('show');"/>
                        </b:column> 
                        </b:row>
                        
                    </b:well>
                </h:form>
                
                <b:modal id="amodal" title="Submitted Dates">
                    <h:panelGrid columns="3" cellpadding="5">  
                        <h:outputText value="Date: " />
                        <h:outputText value="#{dateBean.adate}">
                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                        </h:outputText>
                        <h:panelGroup>converted with <code>&lt;f:convertDateTime pattern="dd/MM/yyyy"/&gt;</code></h:panelGroup>

                        <h:outputText value="Date (3 months):" />
                        <h:outputText value="#{dateBean.bdate}"/>
                        <h:outputText value="no conversion" />
                        
                        <h:outputText value="Inline:" />
                        <h:outputText value="#{dateBean.cdate}">
                            <f:convertDateTime pattern="MM/dd/yy"/>
                        </h:outputText>
                        <h:panelGroup>converted with <code>&lt;f:convertDateTime pattern="MM/dd/yy"/&gt;</code></h:panelGroup>
                    </h:panelGrid>
                    <f:facet name="footer">
                        <b:button value="close" dismiss="modal" onclick="return false;"/>
                        <b:button value="Ok" look="primary" dismiss="modal" onclick="return false;"/>
                    </f:facet>
                </b:modal>
                <br/><br/><br/><br/>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
